<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>LiveValidation  - Examples</title>
  <meta name="description" content="A javascript library for all your client-side and form validation needs." />
  <meta name="keywords" content="javascript, form, forms, validation, library, web2.0, ajax" />
  <!-- yahoo user interface css 
      (reset - resets all defaults to be pretty much identical cross browser)
      (fonts - standardises default fonts styles crosss browser)
      (grids - provides cross browser positional styles for creating layouts) 
      see http://developer.yahoo.com/yui/grids/ -->
  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.0/build/reset-fonts-grids/reset-fonts-grids.css" />

  <link rel="stylesheet" type="text/css" href="css/consolidated_common.css" />
  
  <!--[if IE]>
    <style type="text/css">
	  
	  #main li {
        width:auto;
      }
      
	  /* fix for fieldset background spill bug in all flavours of IE */
	  fieldset {
        position: relative;
        margin: 2em 0 1em 0;
      }
      legend {
        position: absolute;
        top: -0.5em;
        left: 0.2em;
      }
	  
    </style>
  <![endif]-->
  
  <!--[if IE 6]>
    <style type="text/css">
      #doc {
		 width:58em;
	  }
		
		#main .supportBox {
			margin-left:40px;
		}
	</style>
  <![endif]-->
  <script type="text/javascript" src="javascripts/src/1.3/livevalidation_standalone.compressed.js"></script>
  	
</head>

<body id="top">
  <div id="bg">
	  <div id="doc">

	    <div id="hd">
	      <h1><a href="/" title="home">LiveValidation</a></h1>
	      <h2>Validation as you type!</h2>
	      <ul id="head_nav">
	            <li><a href="/download" title="download">download</a></li>  
	            <li><a href="/documentation" title="documentation">documentation</a></li>
				<li><a href="/examples" title="examples">examples</a></li>    
	      </ul>

	    </div>
	    <div id="topMain"> </div>
	    <div id="main">
			<div class="container_with_padding">
		  <h2>Examples...</h2>
          <p>Here you will see LiveValidation in action, and the code that makes it all happen, to serve as examples of its capabilities and as tutorials to get you started.</p>
					
			<p><strong>IMPORTANT</strong> - As you probably already know, relying on client-side validation alone is a very bad idea. 
Always perform appropriate server-side validation as well. The purpose of this library, and javascript validation in general, 
is not to replace server-side validation, but make the act of filling in a form less daunting for a user, and to save them time.</p>

		  
		  <h4>Contents</h4>
		  
		  <ul>
		     <li><a href="#exampleHomepage" title="Homepage example">Homepage example</a></li>
			 <li><a href="#examplePresence" title="Presence">Presence</a></li>
			 <li><a href="#exampleFormat" title="Format">Format</a></li>
			 <li><a href="#exampleNumericality" title="Numericality">Numericality</a></li>

			 <li><a href="#exampleLength" title="Length">Length</a></li>
			 <li><a href="#exampleInclusion" title="Inclusion">Inclusion</a></li>
			 <li><a href="#exampleExclusion" title="Exclusion">Exclusion</a></li>
			 <li><a href="#exampleAcceptance" title="Acceptance">Acceptance</a></li>
			 <li><a href="#exampleConfirmation" title="Confirmation">Confirmation</a></li>
			 <li><a href="#exampleEmail" title="Email">Email</a></li>

					
			 <li><a href="#exampleComposite" title="Composite validations">Composite validations (combining validations)</a></li>
			 <li><a href="#exampleForms" title="Validating entire forms">Validating entire forms</a></li>
			 
			 <li><a href="#exampleStyles" title="Styling it up">Styling it up</a></li>
			 
			 <!-- <li><a href="#exampleNonLiveValidation" title="Validations outside the context of a LiveValidation">Validations outside the context of a LiveValidation</a></li> -->
		  </ul> 
          <br/>
		  
		  <div class="section" id="exampleHomepage">
			  <h3>Homepage example <a href="#top" class="gotoTop">Top</a></h3>

			  <p>First up, just in case you were wondering, the homepage example consists of 2 validations - Presence to make sure it is filled in, and Format to check that the value entered contains &lsquo;hello&rsquo; in any case. Here is how it works...</p>
	          <p>
		          Say &ldquo;hello&rdquo;: 
		          <input type="text" id="sayHello" />
		          <script type="text/javascript">
		            var sayHello = new LiveValidation('sayHello', { validMessage: 'Hey there!', wait: 500});
		            sayHello.add(Validate.Presence, {failureMessage: "Don't just ignore me, I wanna be your friend!"});
		            sayHello.add(Validate.Format, {pattern: /^hello$/i, failureMessage: "How come you've not said 'hello' yet?" } );
		          </script>  
	          </p>

	          <p>First the field is set up to be a LiveValidation object, by passing in its id as the first argument. In this example the 
validMessage has also been overridden by including an options object, and the wait option is set to 500 milliseconds, to make it only validate 500ms after the user stops typing:</p>
	          <pre><code lang="javascript">var sayHello = new LiveValidation( "sayHello", { validMessage: "Hey there!", wait: 500 } );</code></pre>
			  <p>Then the Presence validation is added to it, and this example also provides an overridden failureMessage:</p>
			  <pre><code lang="javascript">sayHello.add( Validate.Presence, 
              { failureMessage: "Don't just ignore me, I wanna be your friend!" } );</code></pre>
			  <p>Finally the Format validation is added, with the regular expression pattern to validate against, again with an overridden failureMessage for this example:</p>
			  <pre><code lang="javascript">sayHello.add( Validate.Format, 
              { pattern: /^hello$/i, failureMessage: "How come you've not said 'hello' yet?" } );</code></pre>

			  <br />
		  </div>
		  
		  <div class="section" id="examplePresence">
	          <h3>Presence <a href="#top" class="gotoTop">Top</a></h3>
			  <p>Presence will fail if there is no value entered in the field.</p>
			  <p>Enter the field then click somewhere else: 
			      <input type="text" id="f1" />
				  <script type="text/javascript">
		            var f1 = new LiveValidation('f1');
		            f1.add(Validate.Presence);
		          </script>  
			  </p>

			  <pre><code lang="javascript">var f1 = new LiveValidation('f1');
f1.add( Validate.Presence );</code></pre>
			  <br />
		  </div>
		  
		  <div class="section" id="exampleFormat">
			  <h3>Format <a href="#top" class="gotoTop">Top</a></h3>
			  <p>Format will fail if the value does not match the regular expression.</p>
			  <p>Should contain the phrase &ldquo;live&rdquo; in any case: 
			      <input type="text" id="f2" />

				  <script type="text/javascript">
		            var f2 = new LiveValidation('f2');
		            f2.add(Validate.Format, { pattern: /live/i });
		          </script>  
			  </p>
			  <pre><code lang="javascript">var f2 = new LiveValidation('f2');
f2.add( Validate.Format, { pattern: /live/i } );</code></pre>
			  <br />
		  </div>
		  
		  
		  <div class="section" id="exampleNumericality">
			  <h3>Numericality <a href="#top" class="gotoTop">Top</a></h3>

			  <p>This kind of validation is concerned with numbers. It can handle scientific numbers (ie. 2e3, being 2000), floats (numbers with a decimal place), and negative numbers properly as you would expect it to throughout, both in values and parameters.</p>
			  <h4>Basic</h4>
			  <p>This example will check if the value provided is a number, or can be converted into a number successfully (ie from a string - the value of a text input is a string). This is performed on every type of Numericality validation automatically, but can be used in its simplest form like this, if you only want to make sure the value entered is a number.</p>
			  <p>Should be a number: 
			      <input type="text" id="f3" />
				  <script type="text/javascript">
		            var f3 = new LiveValidation('f3');
		            f3.add(Validate.Numericality);
		          </script>  
			  </p>
			  <pre><code lang="javascript">var f3 = new LiveValidation('f3');
f3.add( Validate.Numericality );</code></pre>

			  <br />
			  
			  <h4>Only allow integers</h4>
			  <p>This example will check that the number supplied is, or equates to, an integer (ie. no decimal places).</p>
			  <p>Should be an integer: 
			      <input type="text" id="f4" />
				  <script type="text/javascript">
		            var f4 = new LiveValidation('f4');
		            f4.add(Validate.Numericality, { onlyInteger: true } );
		          </script>  
			  </p>
			  <pre><code lang="javascript">var f4 = new LiveValidation('f4');
f4.add( Validate.Numericality, { onlyInteger: true } );</code></pre>

			  <br />
			  
			  
			  <h4>Specific number</h4>
			  <p>This example will check that the value is the same as, or equates to, a specific number that you supply.</p>
			  <p>Should be 2000 (or scientific representation of it, 2e3): 
			      <input type="text" id="f5" />
				  <script type="text/javascript">
		            var f5 = new LiveValidation('f5');
		            f5.add(Validate.Numericality, { is: 2000 } );
		          </script>  
			  </p>
			  <pre><code lang="javascript">var f5 = new LiveValidation('f5');
f5.add( Validate.Numericality, { is: 2000 } );</code></pre>

			  <br />
			  
			  <h4>Higher than or equal to a minimum number</h4>
			  <p>This example will check that the value is more than or equal to a minimum number that you supply.</p>
			  <p>Should be 2000 or higher (or scientific representation of it, 2e3): 
			      <input type="text" id="f6" />
				  <script type="text/javascript">
		            var f6 = new LiveValidation('f6');
		            f6.add(Validate.Numericality, { minimum: 2000 } );
		          </script>  
			  </p>
			  <pre><code lang="javascript">var f6 = new LiveValidation('f6');
f6.add( Validate.Numericality, { minimum: 2000 } );</code></pre>

			  <br />
			  
			  <h4>Lower than or equal to a maximum number</h4>
			  <p>This example will check that the value is less than or equal to a maximum number that you supply.</p>
			  <p>Should be 2000 or lower (or scientific representation of it, 2e3): 
			      <input type="text" id="f7" />
				  <script type="text/javascript">
		            var f7 = new LiveValidation('f7');
		            f7.add(Validate.Numericality, { maximum: 2000 } );
		          </script>  
			  </p>
			  <pre><code lang="javascript">var f7 = new LiveValidation('f7');
f7.add( Validate.Numericality, { maximum: 2000 } );</code></pre>

			  <br />
			  
			  <h4>Within a range of numbers</h4>
			  <p>This example will check that the value is a number that falls within a range that you supply. This is done supplying both a &lsquo;minimum&rsquo; and &lsquo;maximum&rsquo;.</p>
			  <p>Should be between 2000 and 2003: 
			      <input type="text" id="f8" />
				  <script type="text/javascript">
		            var f8 = new LiveValidation('f8');
		            f8.add(Validate.Numericality, { minimum: 2000, maximum: 2003 } );
		          </script>  
			  </p>

			  <pre><code lang="javascript">var f8 = new LiveValidation('f8');
f8.add( Validate.Numericality, { minimum: 2000, maximum: 2003 } );</code></pre>
			  <br />
			  
			  <h4>Combination</h4>
			  <p>Most of the above parameters can be combined, the only execption being that you cannot combine &lsquo;is&rsquo; with &lsquo;minimum&rsquo; or &lsquo;maximum&rsquo;, if this is done &lsquo;is&rsquo; will take precedence. This example will check that the value is a number that falls within a range that you supply, and that it is an integer. This is done supplying both a &lsquo;minimum&rsquo; and &lsquo;maximum&rsquo;, and true for &lsquo;onlyInteger&rsquo;.</p>

			  <p>Should be between 2000 and 2003, and also be an integer: 
			      <input type="text" id="f9" />
				  <script type="text/javascript">
		            var f9 = new LiveValidation('f9');
		            f9.add(Validate.Numericality, { minimum: 2000, maximum: 2003, onlyInteger: true } );
		          </script>  
			  </p>
			  <pre><code lang="javascript">var f9 = new LiveValidation('f9');
f9.add( Validate.Numericality, { minimum: 2000, maximum: 2003, onlyInteger: true } );</code></pre>
			  <br />
		  </div>
		  
		  
		  
		  
		  <div class="section" id="exampleLength">
			  <h3>Length <a href="#top" class="gotoTop">Top</a></h3>

			  <p>Length is concerned with the number of characters in a value. You can do various validations on it, like check it is a specific length, less than or equal to a maximum length, greater than or equal to a minimum length, or falls within a range of lengths.</p>
			  
			  <h4>Specific length</h4>
			  <p>This example will check that the value is the exact length of which you supply.</p>
			  <p>Should be 4 characters in length: 
			      <input type="text" id="f10" />
				  <script type="text/javascript">
		            var f10 = new LiveValidation('f10');
		            f10.add(Validate.Length, { is: 4 } );
		          </script>  
			  </p>
			  <pre><code lang="javascript">var f10 = new LiveValidation('f10');
f10.add( Validate.Length, { is: 4 } );</code></pre>

			  <br />
			  
			  
			  
			  <h4>Longer than or equal to a minimum length</h4>
			  <p>This example will check that the value is more than or equal to a minimum length that you supply.</p>
			  <p>Should be 4 or more characters in length: 
			      <input type="text" id="f11" />
				  <script type="text/javascript">
		            var f11 = new LiveValidation('f11');
		            f11.add(Validate.Length, { minimum: 4 } );
		          </script>  
			  </p>
			  <pre><code lang="javascript">var f11 = new LiveValidation('f11');
f11.add( Validate.Length, { minimum: 4 } );</code></pre>

			  <br />
			  
			  
			  <h4>Shorter than or equal to a maximum length</h4>
			  <p>This example will check that the value is less than or equal to a maximum length that you supply.</p>
			  <p>Should be 4 or less characters in length: 
			      <input type="text" id="f12" />
				  <script type="text/javascript">
		            var f12 = new LiveValidation('f12');
		            f12.add(Validate.Length, { maximum: 4 } );
		          </script>  
			  </p>
			  <pre><code lang="javascript">var f12 = new LiveValidation('f12');
f12.add( Validate.Length, { maximum: 4 } );</code></pre>

			  <br />
			  
			  
			  <h4>Within a range of lengths</h4>
			  <p>This example will check that the value is a number that falls within a range that you supply. This is done supplying both a &lsquo;minimum&rsquo; and &lsquo;maximum&rsquo;.</p>
			  <p>Should be between 4 and 8 characters in length: 
			      <input type="text" id="f13" />
				  <script type="text/javascript">
		            var f13 = new LiveValidation('f13');
		            f13.add(Validate.Length, { minimum: 4, maximum: 8 } );
		          </script>  
			  </p>

			  <pre><code lang="javascript">var f13 = new LiveValidation('f13');
f13.add( Validate.Length, { minimum: 4, maximum: 8 } );</code></pre>
			  <br />
		  </div>
			
		  
		  
		  <div class="section" id="exampleInclusion">
			  <h3>Inclusion <a href="#top" class="gotoTop">Top</a></h3>
			  <p>Inclusion lets you validate against a list of allowed values. You can do an exact match or a partial match.</p>
			  
			  <h4>Exact match</h4>

			  <p>This example will check that the value is the same as any in your allowed values.</p>
			  <p>Should be &ldquo;cow&rdquo;, &ldquo;pigeon&rdquo;, or &ldquo;giraffe&rdquo;: 
			      <input type="text" id="f14" />
				  <script type="text/javascript">
		            var f14 = new LiveValidation('f14');
		            f14.add(Validate.Inclusion, { within: [ 'cow' , 'pigeon', 'giraffe' ] } );
		          </script>  
			  </p>
			  <pre><code lang="javascript">var f14 = new LiveValidation('f14');
f14.add( Validate.Inclusion, { within: [ 'cow' , 'pigeon', 'giraffe' ] } );</code></pre>

			  <br />
			  
			  
			  
			 <h4>Partial match</h4>
			  <p>This example will check that any part of the value matches something in the allowed list. Allow this by setting the &lsquo;partialMatch&rsquo; to be true.</p>
			  <p>Should contain &ldquo;cow&rdquo;, &ldquo;pigeon&rdquo;, or &ldquo;giraffe&rdquo; somewhere in your entry: 
			      <input type="text" id="f15" />

				  <script type="text/javascript">
		            var f15 = new LiveValidation('f15');
		            f15.add(Validate.Inclusion, { within: [ 'cow' , 'pigeon', 'giraffe' ], partialMatch: true } );
		          </script>  
			  </p>
			  <pre><code lang="javascript">var f15 = new LiveValidation('f15');
f15.add( Validate.Inclusion, { within: [ 'cow' , 'pigeon', 'giraffe' ], partialMatch: true } );</code></pre>
			  <br />
		  </div>	
		  
		  <div class="section" id="exampleExclusion">
			  <h3>Exclusion <a href="#top" class="gotoTop">Top</a></h3>
			  <p>Exclusion lets you validate against a list of values that are not allowed. You can do an exact match or a partial match.</p>

			  
			  <h4>Exact match</h4>
			  <p>This example will check that the value is not the same as any in your allowed values.</p>
			  <p>Should not be &ldquo;cow&rdquo;, &ldquo;pigeon&rdquo;, or &ldquo;giraffe&rdquo;: 
			      <input type="text" id="f16" />
				  <script type="text/javascript">
		            var f16 = new LiveValidation('f16');
		            f16.add(Validate.Exclusion, { within: [ 'cow' , 'pigeon', 'giraffe' ] } );
		          </script>  
			  </p>

			  <pre><code lang="javascript">var f16 = new LiveValidation('f16');
f16.add( Validate.Exclusion, { within: [ 'cow' , 'pigeon', 'giraffe' ] } );</code></pre>
			  <br />
			  
			  
			  
			  <h4>Partial match</h4>
			  <p>This example will check that no part of the value matches something in the disallowed list. Allow this by setting the &lsquo;partialMatch&rsquo; to be true.</p>
			  <p>Should not contain &ldquo;cow&rdquo;, &ldquo;pigeon&rdquo;, or &ldquo;giraffe&rdquo; anywhere in your entry: 
			      <input type="text" id="f17" />

				  <script type="text/javascript">
		            var f17 = new LiveValidation('f17');
		            f17.add(Validate.Exclusion, { within: [ 'cow' , 'pigeon', 'giraffe' ], partialMatch: true } );
		          </script>  
			  </p>
			  <pre><code lang="javascript">var f17 = new LiveValidation('f17');
f17.add( Validate.Exclusion, { within: [ 'cow' , 'pigeon', 'giraffe' ], partialMatch: true } );</code></pre>
			  <br />
		  </div>	 
		  
		  
		  
		  <div class="section" id="exampleAcceptance">
			  <h3>Acceptance <a href="#top" class="gotoTop">Top</a></h3>
			  <p>Acceptance lets you validate that a checkbox has been checked.</p>

			  <p>I accept that LiveValidation is the validation of my dreams: 
			      <input type="checkbox" id="f18" value="1" class="checkbox" />
				  <script type="text/javascript">
		            var f18 = new LiveValidation('f18');
		            f18.add(Validate.Acceptance );
		          </script>  
			  </p>
			  <pre><code lang="javascript">var f18 = new LiveValidation('f18');
f18.add( Validate.Acceptance );</code></pre>
			  <br />
		  </div>	 
		  
		  
		  <div class="section" id="exampleConfirmation">
			  <h3>Confirmation <a href="#top" class="gotoTop">Top</a></h3>

			  <p>This is used to check that the value of the confirmation field matches that of another field. 
The most common use for this is for passwords, as demonstrated below, but will work just as well on other field types.</p>
			  <p>Enter a password: 
			      <input type="password" id="myPasswordField" />
				  <br />
				  Confirm password:
				  <input type="password" id="f19" />
				  <script type="text/javascript">
		            var f19 = new LiveValidation('f19');
		            f19.add(Validate.Confirmation, { match: 'myPasswordField'} );
		          </script>  
			  </p>
			  <pre><code lang="javascript">var f19 = new LiveValidation('f19');
f19.add( Validate.Confirmation, { match: 'myPasswordField' } );</code></pre>

			  <br />
		  </div>	 
		  
		  
		  <div class="section" id="exampleEmail">
			  <h3>Email <a href="#top" class="gotoTop">Top</a></h3>
			  <p>The email validation is not a real kind of validation in the sense that it actually uses the Validate.Format function to do its validation.
It is essentially a validation that is done often enough to merit its own function so you don&rsquo;t have to remember the long regular expression and 
custom failureMessage each time you want to validate an email.</p>
			  <p>It also serves as an example for the more adventurous of you, who want to make your own library of custom validations that you will 
 use often. These will most likely include things like postcodes, telephone numbers, dates etc. which vary
 far too widely to include here, but it was felt that email addresses are generic enough to warrant inclusion, so here you go.</p>
			  <p>Should be an email address: 
				  <input type="text" id="f20" />

				  <script type="text/javascript">
		            var f20 = new LiveValidation('f20');
		            f20.add(Validate.Email );
		          </script>  
			  </p>
			  <pre><code lang="javascript">var f20 = new LiveValidation('f20');
f20.add( Validate.Email );</code></pre>
			  <br />
		  </div>	 
		  
		  <div class="section" id="exampleComposite">
			  <h3>Composite validations (combining validations) <a href="#top" class="gotoTop">Top</a></h3>
			  <p>Most of the time, you will want to combine multiple types of validation on a single field. As your user is given real-time feedback,
 it would also be good to be able to specify an order in which they fail, so that the most appropriate message is displayed to avoid any confusion.</p>

 			  <p>LiveValidation makes this easy. You simply keep adding validations to the same LiveValidation object, and they will fail in the order they 
are added.</p>
			 <p>The most usual combination you will use is Validate.Presence with one or more other validations, as only Validate.Presence, Validate.Confirmation
and Validate.Acceptance will fail and display their message on an empty field. This is because it is common to have fields which are optional, but if the user decides
 to provide information, then it must be less than a certain length etc. Therefore if you want to ensure a field is filled in, you must add a Validate.Presence, 
 then if you require any more validation types add them too.</p>
			  <p>You have already seen an example of a composite validation in the homepage example. The following example checks that the field is not empty, 
then checks that it is an email address, and then makes sure it is between 10 and 20 characters long.</p>
			  <p>Enter an email address (10 - 20 characters long): 
				  <input type="text" id="f21" />
				  <script type="text/javascript">
		            var f21 = new LiveValidation('f21');
					f21.add( Validate.Presence );
					f21.add( Validate.Email );
		            f21.add(Validate.Length, { minimum: 10, maximum: 20 } );
		          </script>  
			  </p>
			  <pre><code lang="javascript">var f21 = new LiveValidation('f21');
f21.add( Validate.Presence );
f21.add( Validate.Email );
f21.add( Validate.Length, { minimum: 10, maximum: 20 } );</code></pre>

			  <br />
		  </div>
		  
		  
		  <div class="section" id="exampleForms">
    		<h3>Validating entire forms on submittal</h3>
        <p>When a LiveValidation object is instantiated, if it finds it is a child of a form, it will automatically attach itself to the submit event of the form, 
    so when it is submitted, validation on all the LiveValidation objects inside it will be performed automatically. If any of the validations fail it will stop the 
    form submitting (this of course only works when javascript is on in the users bowser, so be sure to do some validation on the server too!).</p>
        <p>You can also specify the onlyOnSubmit option to be true when you create the LiveValidation object to make it only validate when the form is 
    submitted. This is demonstrated in the following example.</p>
    		<p>Note also that the email field has no validation that it is present, therefore if this is not filled in the form
    will still be valid, as it will be treated as an optional field.</p>

				<p>In this example the outcome is overidden if it is valid as this page has nowhere to submit to - instead 
of submitting, it will alert that it is valid, in real life it will just carry on submitting if valid.</p>
    		<form action="#" method="post">
    			<fieldset>
    			  <legend>Example of form validation</legend>
    				<p><label for="field1" class="displayBlock">Email (optional):</label><input type="text" id="field1" /></p>
    				<p><label for="field2" class="displayBlock">Acceptance (required):</label><input type="checkbox" id="field2" class="checkbox" /></p>
    				<p><label for="field3" class="displayBlock">Presence (required):</label><textarea  id="field3" class="shallow" rows="2" cols="10"></textarea></p>

    		    <p><input type="submit" class="submit" value="Test me!" /></p>
    		  </fieldset>
    		</form>
        <script type="text/javascript">
    			var field1 = new LiveValidation( 'field1', {onlyOnSubmit: true } );
    			field1.add( Validate.Email );
    			var field2 = new LiveValidation( 'field2', {onlyOnSubmit: true } );
    			field2.add( Validate.Acceptance );
    			var field3 = new LiveValidation( 'field3', {onlyOnSubmit: true } );
    			field3.add( Validate.Presence );

          var automaticOnSubmit = field1.form.onsubmit;
          field1.form.onsubmit = function(){
	          var valid = automaticOnSubmit();
	          if(valid)alert('The form is valid!');
            return false;
          }
    	  </script> 
				<br />
        <pre><code lang="javascript">var field1 = new LiveValidation( 'field1', {onlyOnSubmit: true } );
field1.add( Validate.Email );
var field2 = new LiveValidation( 'field2', {onlyOnSubmit: true } );
field2.add( Validate.Acceptance );
var field3 = new LiveValidation( 'field3', {onlyOnSubmit: true } );
field3.add( Validate.Presence );</code></pre>
			  <br />
      </div>

		  
		  
		  <div class="section" id="exampleStyles">
			  <h3>Styling it up <a href="#top" class="gotoTop">Top</a></h3>
			  <p>LiveValidation objects use a few CSS classes to allow you to style up the messages and the form fields based upon whether they are valid or not.</p>
			  <ul>
			  	   <li>LV_validation_message - the class that is added to all validation messages</li>
			  	   <li>LV_valid - the class that is added to a valid message</li>

				   <li>LV_invalid - the class that is added to an invalid message</li>
				   <li>LV_valid_field - the class that is added to a valid field</li>
				   <li>LV_invalid_filed - the class that is added to an invalid field</li>
			  </ul>
			  <p>To start you off, these are the styles that this site uses for them:</p>
			  <pre><code lang="css">.LV_validation_message{
    font-weight:bold;
    margin:0 0 0 5px;
}

.LV_valid {
    color:#00CC00;
}
	
.LV_invalid {
    color:#CC0000;
}
    
.LV_valid_field,
input.LV_valid_field:hover, 
input.LV_valid_field:active,
textarea.LV_valid_field:hover, 
textarea.LV_valid_field:active {
    border: 1px solid #00CC00;
}
    
.LV_invalid_field, 
input.LV_invalid_field:hover, 
input.LV_invalid_field:active,
textarea.LV_invalid_field:hover, 
textarea.LV_invalid_field:active {
    border: 1px solid #CC0000;
}</code></pre>

			  <br />
		  </div>	 
		  
			</div>
		</div>
	    <div id="bottomMain"> </div>
	    <div id="ft">  
	        <ul id="foot_nav">
	        	<li><a href="/" title="home">home</a></li>  
	            <li><a href="/examples" title="examples">examples</a></li> 
	            <li><a href="/documentation" title="documentation">docs</a></li>  
	            <li><a href="/download" title="download">download</a></li>

							<li><a href="/blog" title="blog">blog</a></li>  
	            <li><a href="/support" title="support">support</a></li>
							<li><a href="/contact" title="contact">contact</a></li>
							<li><a href="/license" title="license">license</a></li>   
	        </ul>
			<br />
			<p>&copy; 2007-2008 Alec Hill | MIT license</p>

			<p> 
				<script type="text/javascript">
					var addthis_pub  = 'alechill2000';
					var addthis_brand = 'LiveValidation';
				</script>
				<a id="addThis" href="http://www.addthis.com/bookmark.php">
					<img src="http://s9.addthis.com/button1-share.gif" width="125" height="16" alt="Share / bookmark this page" />
				</a>
				<script type="text/javascript">
					var add_link = document.getElementById('addThis');
					add_link.onmouseover = function(){
						return addthis_open(this, '', '[URL]', '[TITLE]');
					}
					add_link.onmouseout = function(){
						addthis_close();
					}
					add_link.onclick = function(){
						return addthis_sendto();
					}
				</script>
				<script type="text/javascript" src="http://s7.addthis.com/js/152/addthis_widget.js"></script>
			</p>

	    </div>
	  </div>
  </div>
  <div id="megaFooter">
  		<script type="text/javascript">
          google_ad_client = "pub-0577456741537280";
          /* LiveValidation footer */
          google_ad_slot = "8284128311";
          google_ad_width = 728;
          google_ad_height = 90;
      </script>
      <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>  
			<br />
			<form action="https://www.paypal.com/cgi-bin/webscr" method="post">

				<input type="hidden" name="cmd" value="_s-xclick" />
				<input class="donate" type="image" src="https://www.paypal.com/en_US/i/btn/x-click-but04.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!" />
				<img alt="" src="https://www.paypal.com/en_GB/i/scr/pixel.gif" width="1" height="1" />
				<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----" />
			</form>
	</div>
  <script type="text/javascript">
      var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
      document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
  </script>
  <script type="text/javascript">
      var pageTracker = _gat._getTracker("UA-2493379-1");
      pageTracker._trackPageview();
  </script>

</body>
</html>